<script setup lang="ts">
	import {
		ref
	} from 'vue'
	import type {
		FormInstance,
		FormRules,
	} from 'element-plus'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import { ElLoading } from 'element-plus'
	import tinymce from 'tinymce/tinymce'
	import TinymceEditor from '@tinymce/tinymce-vue'
	import 'tinymce/themes/silver/theme'
	import 'tinymce/icons/default/icons'
	import 'tinymce/models/dom'
	import 'tinymce/plugins/autolink'
	import 'tinymce/plugins/autoresize'
	import 'tinymce/plugins/fullscreen'
	import 'tinymce/plugins/image'
	import 'tinymce/plugins/insertdatetime'
	import 'tinymce/plugins/link'
	import 'tinymce/plugins/lists'
	import 'tinymce/plugins/media'
	import 'tinymce/plugins/preview'
	import 'tinymce/plugins/table'
	import 'tinymce/plugins/wordcount'
	import 'tinymce/plugins/code'
	import 'tinymce/plugins/searchreplace'
	import useSettingsStore from '@/store/modules/settings'

	import { createDirectUploadTask, createMultipartUploadV2Task, FileData } from 'qiniu-js';
	// import shopApi from '@/api/modules/shops/shops'
	import dictApi from '@/api/modules/system/dict'
	import setupApi from '@/api/zhitan/setup'
	import userApi from '@/api/modules/users/user'

	const title : any = ref('新增模板')

	const percent : any = ref(false)
	const percentnum : any = ref(0)
	const baseurl : any = ref(`${import.meta.env.VITE_APP_API_BASEURLIMG}`)
	const route = useRoute()
	// const emits = defineEmits(['updateTable'])
	const tableData : any = ref([]) // 分类
	const labelList : any = ref([]) // 标签
	const loadicon = new URL('@/assets/images/loadicon.gif', import.meta.url).href
	const fullscreenLoading = ref(false)
	const isshowtoast : any = ref(false)
	const settingsStore = useSettingsStore()
	const defaultSetting = ref({
		language_url: 'tinymce/langs/zh-Hans.js',
		language: 'zh-Hans',
		skin_url: settingsStore.settings.app.colorScheme === 'light' ? 'tinymce/skins/ui/oxide' :
			'tinymce/skins/ui/oxide-dark',
		content_css: settingsStore.settings.app.colorScheme === 'light' ?
			'tinymce/skins/content/default/content.min.css' : 'tinymce/skins/content/dark/content.min.css',
		min_height: 500,
		max_height: 1000,
		selector: 'textarea',
		plugins: 'autolink autoresize fullscreen image insertdatetime link lists media preview table wordcount code searchreplace',
		toolbar: 'undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | forecolor backcolor removeformat | link image media table insertdatetime searchreplace | preview code fullscreen',
		branding: false,
		menubar: false,
		toolbar_mode: 'sliding',
		insertdatetime_formats: [
			'%Y年%m月%d日',
			'%H点%M分%S秒',
			'%Y-%m-%d',
			'%H:%M:%S',
		],
		content_style: 'video { width: 100%; height: auto; margin: 0; padding: 0; box-shadow: none; display: block; } img {max-width:100%;height:auto;vertical-align:top}',
		file_picker_types: 'media',
		video_template_callback: function (data : any, video_class : any) {
			// 返回自定义的视频HTML
			return '<p style="width: 100%; height:auto; padding:0px; display:flex; justify-content:center; align-items:center;"><video class="' + video_class + '" style="width: 100%; object-fit: cover; margin:0; border:none;display: block;padding: 0px; box-shadow: none; " controls width="100%"  src="' + data.source + '"' +
				' poster="' + data.poster + '">' +
				'<source src="' + data.source + '"' +
				' type="' + data.source_mime + '"></source>' +
				'</video></p>';
		},
		file_picker_callback: function (cb, value, meta) {
			if (meta.filetype == 'media') {
				//创建一个隐藏的type=file的文件选择input
				let input = document.createElement('input');
				input.setAttribute('type', 'file');
				input.onchange = function () {
					let file = this.files[0];//只选取第一个文件。如果要选取全部，后面注意做修改
					uploadvideo(file, (e : any) => {
						cb(e)
					})
				}
				//触发点击
				input.click();
			}
		},
		images_upload_handler: (blobInfo : any) => new Promise((resolve) => {
			// const img = `data:image/jpeg;base64,${blobInfo.base64()}`
			// resolve(img)
			upload(blobInfo, (e : any) => {
				resolve(e)
			})
		}),
		// images_upload_handler: (blobInfo: any) => new Promise((resolve) => {
		//   upload(blobInfo, (e: any) => {
		//     resolve(e)
		//   })
		// }),
	})
	const typeList : any = ref([]) //类型
	const signList : any = ref([
		{
			id: '公司',
			name: '公司',
		},
		{
			id: '劳务',
			name: '劳务',
		},
		{
			id: '雇主',
			name: '雇主',
		}
	]) //签署人
	onMounted(async () => {
		if (route.query.id) {
			getInfo(route.query.id)
			title.value = '编辑模板'
		}
		tinymce.init({})
		typeList.value = await getDict(6)
	})
	function getDict(id : any) {
		return new Promise((resolve, reject) => {
			dictApi.index({
				page: 1,
				limit: 9999,
				dictId: id,
			}).then((res : any) => {
				resolve(res.data.map((i : any) => {
					i.id = Number(i.id)
					return i
				}));
			})
		});
	}
	const form : any = ref({
		status: 1,
		sort: 1
	})
	// 定义提交按钮函数
	const formRef = ref<FormInstance>()
	const formRules = ref<FormRules>({
		name: [{
			required: true,
			message: '请输入名称',
			trigger: 'blur',
		}],
		type: [{
			required: true,
			message: '请选择协议类型',
			trigger: 'blur'
		},],
		required_signatory: [{
			required: true,
			message: '请添加所需签署人',
			trigger: 'blur'
		},],
		rich_text: [{
			required: true,
			message: '请添加协议内容',
			trigger: 'blur'
		},],
	})
	const jsondataa : any = ref([{
		name: "乙方信息",
		english: "Information_of_party"
	}, {
		name: "产品名称",
		english: "product_name"
	}, {
		name: "营期",
		english: "camp_period"
	}, {
		name: "产品价格小写",
		english: "product_price_small"
	}, {
		name: "产品价格大写",
		english: "product_price_big"
	}, {
		name: "实际价格小写",
		english: "actual_price_small"
	}, {
		name: "实际价格大写",
		english: "actual_price_big"
	}, {
		name: "成团人数",
		english: "group_num"
	}, {
		name: "公章",
		english: "official_seal"
	}, {
		name: "乙方签名",
		english: "autograph_img"
	}, {
		name: "签约日期",
		english: "signing_date"
	}])
	const tabbar = useTabbar()
	function goBack() {
		tabbar.close({
			name: 'contractindex'
		})
	}
	async function upload(blobInfo : any, fn : any) {
		// const loadingInstance = ElLoading.service({
		// 	lock: true,
		// 	text: '上传中...',
		// 	background: 'rgba(0, 0, 0, 0.7)',
		// })
		// fullscreenLoading.value = true
		// const formData = new FormData()
		// formData.append('file', blobInfo.blob())
		// // 这里为自己的上传接口调用方法
		// userApi.upload(formData).then((res : any) => {
		// 	console.log(res, 'res')
		// 	fullscreenLoading.value = false
		// 	if (res) {
		// 		fn && fn(baseurl.value + res.url)

		// 	}
		// 	else {
		// 		ElMessage.error('图片上传失败')
		// 		fn && fn('')
		// 	}
		// })
		const token : any = await qiniu_token(blobInfo.blob())
		const fileData : FileData = { type: 'file', data: blobInfo.blob() }
		let config = {
			useCdnDomain: true,
			region: 'z2', // 根据实际地区选择
			retryCount: 3, //上传自动重试次数  默认3次
			tokenProvider: () => {
				return Promise.resolve(token)
			},
		};
		const uploadTask = createMultipartUploadV2Task(fileData, config);
		console.log(uploadTask, 'uploadTask 1')

		percent.value = true
		// 设置进度回调函数
		uploadTask.onProgress((progress : any, context : any) => {
			// 处理进度回调
			// console.log(progress, context, progress.percent, 'context123')
			percentnum.value = Math.round((((progress.percent * 100) - 75) * 4 || 0))
			console.log(progress, context, progress.percent, percentnum.value, 'context123')
		});

		// 设置完成回调函数
		uploadTask.onComplete((result : any, context : any) => {
			// 处理完成回调
			console.log(JSON.parse(result), context, '设置完成回调函数')
			percentnum.value = 100
			let newResult = JSON.parse(result)
			// if (!form.value.name) {
			// 	form.value.name = file.name
			// }
			// form.value.file = newResult.key
			fn && fn(baseurl.value + '/' + newResult.key)
			console.log(newResult, 'newResultnewResult')
			// console.log(form.value, 'that.form')
			setTimeout(() => {
				percent.value = false
				ElMessage.success(`资源上传成功`)
				percentnum.value = 0
			}, 500)
		});

		// 设置错误回调函数
		uploadTask.onError((error : any, context : any) => {
			percent.value = 0
			console.log(error, context, '设置错误回调函数')
			percent.value = false
			ElMessageBox.alert('文件上传失败，请联系管理员', '提示', {
				callback: (action : any) => { },
			})

		});

		uploadTask.start()

	}
	async function uploadvideo(blobInfo : any, fn : any) {
		console.log(blobInfo, 'blobInfoblobInfo')
		// fullscreenLoading.value = true
		// const formData = new FormData()
		// formData.append('file', blobInfo)
		// // 这里为自己的上传接口调用方法
		// userApi.upload(formData).then((res : any) => {
		// 	console.log(res, 'res')
		// 	fullscreenLoading.value = false
		// 	if (res) {
		// 		fn && fn(baseurl.value + res.url)
		// 	}
		// 	else {
		// 		ElMessage.error('图片上传失败')
		// 		fn && fn('')
		// 	}
		// })
		const token : any = await qiniu_token(blobInfo)
		const fileData : FileData = { type: 'file', data: blobInfo }
		let config = {
			useCdnDomain: true,
			region: 'z2', // 根据实际地区选择
			retryCount: 3, //上传自动重试次数  默认3次
			tokenProvider: () => {
				return Promise.resolve(token)
			},
		};
		const uploadTask = createMultipartUploadV2Task(fileData, config);
		console.log(uploadTask, 'uploadTask 1')

		percent.value = true
		// 设置进度回调函数
		uploadTask.onProgress((progress : any, context : any) => {
			// 处理进度回调
			// console.log(progress, context, progress.percent, 'context123')
			percentnum.value = Math.round((((progress.percent * 100) - 75) * 4 || 0))
			console.log(progress, context, progress.percent, percentnum.value, 'context123')
		});

		// 设置完成回调函数
		uploadTask.onComplete((result : any, context : any) => {
			// 处理完成回调
			console.log(JSON.parse(result), context, '设置完成回调函数')
			percentnum.value = 100
			let newResult = JSON.parse(result)
			// if (!form.value.name) {
			// 	form.value.name = file.name
			// }
			// form.value.file = newResult.key
			fn && fn(baseurl.value + '/' + newResult.key)
			console.log(newResult, 'newResultnewResult')
			// console.log(form.value, 'that.form')
			setTimeout(() => {
				percent.value = false
				ElMessage.success(`资源上传成功`)
				percentnum.value = 0
			}, 500)
		});

		// 设置错误回调函数
		uploadTask.onError((error : any, context : any) => {
			percent.value = 0
			console.log(error, context, '设置错误回调函数')
			percent.value = false
			ElMessageBox.alert('文件上传失败，请联系管理员', '提示', {
				callback: (action : any) => { },
			})

		});

		uploadTask.start()
	}

	// 获取7牛token
	function qiniu_token(file : any) {
		console.log(file)
		return new Promise((resolve : any, reject : any) => {
			userApi.getToken({
				ext: file.name.substring(file.name.lastIndexOf('.') + 1)
			}).then((res : any) => {
				console.log(res, 'resres')
				resolve(res.token)
			}).catch((err : any) => {
				ElMessageBox.alert('七牛token验证失败，请联系管理员', '提示', {
					callback: (action : any) => { },
				})
				reject(err)
			})
		});
	}
	function getInfo(id : any) {
		setupApi.Pact_info({ id: id }).then((res : any) => {
			console.log(res, '协议详情')
			form.value = res
			// form.value.required_signatory = res.required_signatory.split(',')
			// form.value.json = JSON.parse(form.value.json)
			// if (!form.value.json) {
			//   form.value.json = []
			// }
		})
	}
	function submitedit() {
		formRef.value && formRef.value.validate((valid : any) => {
			if (valid) {
				const obj : any = Object.assign({}, form.value)
				// obj.required_signatory = obj.required_signatory.join(',')
				// obj.type_name = typeList.value.find((item : any) => item.id == obj.type).name
				// obj.json = JSON.stringify(obj.json)
				console.log(obj, '提交参数')
				// return false
				setupApi.Pact_edit(obj).then((res : any) => {
					ElMessage({
						message: res.msg,
						type: 'success'
					})
					goBack()
					// emits('updateTable', true) // 告诉父组件
				})
			}
		})
	}
	const value = ref('')
	function handleSuccess(e : any, key : any) {
		console.log(e, key)
		form.value.image = e
	}
	function handleSuccess1(e : any, key : any) {
		console.log(e, key, 'handleSuccess1')
		form.value.images = form.value.images ? form.value.images : []
		form.value.images.push(e)
	}
	function onAuthAdd() {
		// if (!form.value.json) {
		//   form.value.json = []
		// }
		// form.value.json.push({
		//   id: tools_id(),
		//   name: "",//展示的内容
		//   value: "",//用户输入的内容
		//   code: "", // 标识符
		// })
		// console.log(form.value.json)
	}
	function tools_id() {
		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
			var r = Math.random() * 16 | 0,
				v = c == 'x' ? r : (r & 0x3 | 0x8);
			return v.toString(16);
		});
	}
	function onAuthDelete(index : number) {
		form.value.json.splice(index, 1)
	}

	// 复制字段
	function copyText(e : any) {
		// 使用 navigator.clipboard.writeText() 方法复制文字
		navigator.clipboard.writeText('{$' + `${e}` + '}')
			.then(() => {
				console.log('Text copied to clipboard');
				// 可以添加提示用户的代码
				// ElMessageBox.alert('已复制到剪贴板', '提示', {
				// 	// if you want to disable its autofocus
				// 	// autofocus: false,
				// 	confirmButtonText: '确认',
				// 	callback: (action : any) => {
				// 		// ElMessage({
				// 		// 	type: 'info',
				// 		// 	message: `action: ${action}`,
				// 		// })
				// 	},
				// })
				ElMessage({
					message: '已复制到剪贴板',
					type: 'success',
				})
				// isshowtoast.value = true
				// setTimeout(() => {
				// 	isshowtoast.value = false
				// }, 1000)

			})
			.catch(err => {
				console.error('Failed to copy text: ', err)
			});
	}
	function closeLoad() {
		fullscreenLoading.value = false
	}
</script>

<template>
	<div class='add relative w-full'>
		<page-header :title="title">
			<el-button size="default" round @click="goBack">
				<template #icon>
					<svg-icon name="ep:arrow-left" />
				</template>
				返回
			</el-button>
		</page-header>
		<page-main>
			<el-form ref="formRef" :model="form" :rules="formRules" label-position="top" label-width="100px">
				<div class="w-full relative">
					<el-row :gutter="24">
						<el-col :xs="24" :sm="24" :md="12" :lg="12">
							<el-form-item label="名称：" prop="name">
								<el-input v-model="form.name" size="large" placeholder="请输入名称" clearable />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<!-- <el-col :xs="24" :sm="24" :md="6" :lg="6">
							<el-form-item label="类型" prop="type">
								<el-select v-model="form.type" placeholder="选择协议类型" size="large">
									<el-option v-for="item in typeList" :key="item.id" :label="item.name"
										:value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="6" :lg="6">
							<el-form-item label="所需签署人" prop="required_signatory">
								<el-select multiple v-model="form.required_signatory" placeholder="所需签署人" size="large">
									<el-option v-for="item in signList" :key="item.id" :label="item.name"
										:value="item.id" />
								</el-select>
							</el-form-item>
						</el-col> -->
						<el-col :xs="24" :sm="24" :md="6" :lg="6">
							<el-form-item label="排序：" prop="sort">
								<el-input-number v-model="form.sort" style="width: 100%;" size="large"
									placeholder="请输入排序号" :min="0" controls-position="right" />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="6" :lg="6">
							<el-form-item label="状态：" prop="status">
								<el-radio-group v-model="form.status">
									<el-radio :value="1">
										正常
									</el-radio>
									<el-radio :value="2">
										暂停
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="自定义模版内容：">
						<div class="flex flex-wrap">
							<div class="flex items-center w-80 mr-4 mb-2" v-for="(i,j) in jsondataa" :key="j">
								<div class="px-2  bg-[#f5f5f5]" style="border:1px solid #ddd;">
									{{i.name}}:
								</div>
								<div class="px-2" style="border:1px solid #ddd;">
									{{i.english}}
								</div>
								<div @click="copyText(i.english)" class="px-2 cursor-pointer bg-[#f5f5f5]"
									style="border:1px solid #ddd;">
									复制
								</div>
							</div>
						</div>
						<!-- <el-table :data="form.json" stripe highlight-current-row border>
              <el-table-column width="60" align="center" fixed>
                <template #header>
                  <el-button type="primary" size="small" plain circle @click="onAuthAdd">
                    <template #icon>
                      <svg-icon name="ep:plus" />
                    </template>
                  </el-button>
                </template>
                <template #default="scope">
                  <el-button type="danger" size="small" plain circle class="delete" @click="onAuthDelete(scope.$index)">
                    <template #icon>
                      <svg-icon name="ep:delete" />
                    </template>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="名称">
                <template #default="scope">
                  <el-input v-model="scope.row.name" />
                </template>
              </el-table-column>
              <el-table-column label="标识">
                <template #default="scope">
                  <el-input v-model="scope.row.code" />
                </template>
              </el-table-column>
            </el-table> -->
					</el-form-item>
					<el-form-item label="协议内容：" prop="content" class="w-full">
						<TinymceEditor v-model="form.content" :init="defaultSetting" />
					</el-form-item>
				</div>
			</el-form>
			<div class="footer">
				<div class="fotterbtn">
					<el-button class="cancel" @click="goBack()" style="margin-right: 20px;">
						取消
					</el-button>
					<el-button type="primary" @click="submitedit()">
						保存
					</el-button>
				</div>
			</div>
		</page-main>
		<div style="width: 100%;height: 100px;"></div>
		<!-- <div style="display: flex;">
      <div>甲方：</div>
      <div>signature1</div>
    </div> -->
		<!-- <div class="w-full" v-if="isshowtoast">

			<div class="bg-[#333] c-[#fff] px-4 py-2 absolute top-50% left-50%"
				style="transform: translate(-50%,-50%);">
				已复制到剪贴板</div>
		</div> -->
		<!-- 上传时的加载遮罩层 -->
		<div v-if="fullscreenLoading" class="loading-mask">
			<div class="flex justify-center items-center d-c ">
				<div class=" c-[#409eff]">
					<img class="w-5 h-5" :src="loadicon" alt>
				</div>
				<div class="my-4 c-[#409eff]">上传中...</div>
				<!-- 添加关闭按钮 -->
				<!-- <el-button type="warning" @click="cancelUpload">取消上传</el-button> -->
				<div style="position: fixed; top:60px;right:60px; z-index:1000000;  border-radius: 50%; background-color: rgba(255, 255, 255, 0.8);"
					class="w-16 h-16 flex justify-center items-center font-size-10 cursor-pointer c-[#333]"
					@click="closeLoad">
					<svg-icon name="ep:close" />
				</div>
			</div>
		</div>
		<div v-if="percent" class="fixed demo-progress w-130 bg-[#fff]  top-50% left-50% "
			style="transform: translate(-50%,-50%); border-radius: 8px; box-shadow: 0px 0px 8px 0px #999; z-index:99999;">
			<!-- <div class="w-full text-end pr-4 pt-4 font-size-6 cursor-pointer" @click="closepercent">
				<svg-icon name="ep:close" />
			</div> -->
			<div class="w-full d-c flex justify-center items-center h-40  py-2 h-16" style=" ">
				<el-progress :width="500" striped striped-flow :text-inside="true" :stroke-width="24"
					:percentage="percentnum" status="success" />
				<div>
					<div class="my-4 c-[#67c23a]" v-if="percentnum>0">上传中...</div>
					<div class="my-4 c-[#e67c28]" v-else>正在解析文件流...</div>
				</div>
			</div>

		</div>
	</div>
</template>

<style lang="scss" scoped>
	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2000;
		/* 确保在el-loading之上 */
	}

	.el-loading {
		position: relative;
	}

	.demo-progress .el-progress--line {
		margin-bottom: 15px;
		width: 450px;
		height: 30px;
	}

	.el-loading .el-button {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 50px;
		background: #fff;
		z-index: 999;
	}

	.el-card.grid-content {
		position: relative;
		padding: 10px 16px 16px;
		background-color: var(--g-toolbar-bg);
		border: none;
		transition: var(--el-transition-duration);

		.title {
			position: relative;
			height: 40px;
			padding-left: 16px;
			margin-bottom: 8px;
			font-size: 20px;
			line-height: 40px;

			.subtitle {
				position: absolute;
				top: 0;
				right: 0;
			}
		}

		.title::before {
			position: absolute;
			top: 50%;
			left: 0;
			width: 4px;
			height: 20px;
			content: "";
			background: var(--el-color-primary);
			border-radius: 4px;
			transform: translateY(-50%);
		}

		.addbtn {
			position: absolute;
			top: 9px;
			right: 15px;
		}
	}

	:deep(.el-card.grid-content>.el-card__body) {
		padding: 0;
	}

	.gaikuang>div {
		width: calc((100% - 80px) / 4);
		padding: 10px 16px;
		margin: 0 10px;
		background-color: var(--g-main-bg);
		border-radius: 6px;
	}

	.gaikuang>div:hover {
		background: linear-gradient(to right, #d2dff4, #ebf3ff);
	}

	.dark .gaikuang>div:hover {
		background: #26303a;
	}

	.gaikuang .tit {
		font-size: 16px;
	}

	.gaikuang .num {
		font-size: 26px;
	}

	.gaikuang .txt {
		margin-left: 10px;
		font-size: 14px;
		color: var(--el-text-color-secondary);

		span {
			margin-left: 6px;
			color: var(--el-text-color-regular);
		}

		.el-icon {
			font-size: 20px;
			font-weight: bolder;
		}

		.ico {
			width: 14px;
			height: 14px;
			margin-left: 6px;
		}
	}

	.biaoshi {
		padding: 2px 4px;
		font-size: 14px;
		font-weight: 900;
		line-height: 18px;
		color: rgb(135 97 31 / 100%);
		letter-spacing: 0;
		background: linear-gradient(90deg, rgb(255 226 171 / 100%) 4.17%, rgb(252 198 139 / 100%) 100%);
		border-radius: 2px;
	}

	.suspension:hover {
		z-index: 999;
		border-radius: 6px;
		box-shadow: 0 14px 24px rgb(0 0 0 / 20%);
		box-shadow: 0 14px 24px #0003;
		transition: all 0.3s ease;
		transform: translateY(-4px) scale(1);
	}

	:deep(.progress .el-progress__text) {
		font-size: 16px !important;
	}

	.el-button+.el-button {
		margin-left: 0;
	}

	.detail {
		background: #f5f5f5;
	}

	.info {
		div {
			position: relative;
			padding-right: 15px;

			&::after {
				position: absolute;
				top: 50%;
				right: 0;
				width: 1px;
				height: 80%;
				content: "";
				background: #ddd;
				transform: translateY(-50%);
			}
		}

		div:last-child::after {
			width: 0;
		}
	}

	.store-tit {
		position: relative;
		padding-left: 10px;
	}

	.store-tit::before {
		position: absolute;
		top: 50%;
		left: 0;
		width: 3px;
		height: 18px;
		content: "";
		background: var(--el-color-primary);
		border-radius: 4px;
		transform: translateY(-50%);
	}

	.table {
		width: 100%;
		overflow: hidden;
		font-size: 12px;
		color: #000;
		border: 1px solid #e5e5e5;
		border-radius: 2px;

		.table-list {
			position: relative;
			width: 100%;
			min-height: 45px;
			font-size: 13px;
			border-bottom: 1px solid #e5e5e5;

			.itendiv {
				padding: 0 12px;
				line-height: 44px;
			}

			.imgssto {
				padding: 0;
			}

			.bg-gray {
				position: absolute;
				width: 80px;
				height: 100%;
				background-color: #f8f8f8;
			}

			&:last-child {
				border-bottom: none;

				div {
					line-height: 45px;
				}
			}
		}

		.table-list.line-sigle .neirong {
			padding-left: 90px;
			// width: calc(100% - 80px);
		}
	}

	.picbox {
		.pic-sigle {
			width: 120px;
			padding: 4px;
			margin-right: 15px;
			// height: 120px;
			border-radius: 4px;

			img {
				width: 106px;
				height: 106px;
			}

			.img {
				width: 106px !important;
				height: 106px !important;
				border: 1px dashed #ddd;
			}
		}
	}

	.add {
		:deep(.tox-tinymce) {
			width: 100% !important;
			height: 675px !important;
		}
	}

	:deep(.el-upload__tip) {
		display: none;
	}
</style>